<html>
<head>
  <meta charset="utf-8">
</head>

<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    function testArg() {
        alert('arguments.length: ' + arguments.length);
        if (arguments.length) {
            for ( var i = 0; i < arguments.length; i++) {
                if (typeof (arguments[i]) == 'object') {
                    alert(arguments[i].abc);
                } else {
                    alert(arguments[i]);
                }
            }
        }
    }
    
    function a () {
        var area = document.createElement("textarea");
        alert("事件冒泡@a");
    }
    function b () {
        alert("事件冒泡@b");
    }    
    function c () {
        alert("事件冒泡@c");
    }
    
    function bi() {
        alert("绑定!");
    }
    
    function htmlTest() {
        if (arguments.length) {
            $("div.demo p").html(arguments[0]);
        } else {
            alert("Div.demo中的p元素的HTML结构：" + $("div.demo p").html());
        }
    }
    
    function showHiden() {
        var d = $('.show');
        d.show();
        alert(d.offset());
        alert(d.offset().left);
        alert(d.offset().top);
        //$('.show').show();
    }
    
    function autoShow() {
        $('.show').show(function(){setTimeout("$('.show').hide('slow')", 5000);});
    }
    
    // -------------------下面是javaScript高级编程中的内容--------------------
    /* 
    function setName(obj) {
        obj.name = "Peihu.wang!";
        obj = new Object();
        obj.name = "Oks";
    }
    var person = new Object();
    setName(person);
    alert(person.name);
    alert(person instanceof Object);
    alert(colors instanceof Array);
    alert(pattern instanceof RegExp);
    */
     
</script>
<div style='width:9px; height:100;'></div>
<div id='show' class='show' style=' display:none;'> 自动消失的功能 </div>
<hr>
<div style='background-color:red ;width:50%;'>
  <input type="button" onclick="testArg();" value="没参数" /> 
  <input type="button" onclick="testArg(1);" value="一个参数" /> 
  <input type="button" onclick="testArg(1,2);" value="两个参数" /> 
  <input type="button" onclick="testArg(1,3,'你丫的');" value="三个参数" /> 
  <input type="button" onclick="testArg(1,3,{'abc':'oks'});" value="四个参数" />
  <br>
</div>
<div onclick='a();' id='ok'>
 <div onclick='b();'>
  <div onclick='c();'>
    这里主要来测试event bubbling
  </div>
 </div>
</div>
<div style='background-color:red ;width:50%;'>
  <input type="button" onclick=" $('.show').show('slow');" value="show" /> 
  <input type="button" onclick=" $('.show').hide('fast');" value="hide" /> 
  <input type="button" onclick=" autoShow();" value="autoShow" /> 
  <input type="button" onclick=" showHiden();" value="showHiden" /> 
  <br>
</div>
<hr>
<div>
  <div class="demo"> <p>这是一个段落元素，里面包含了一个a链接元素<a href="#">W3CPLUS</a></p> </div>
  <input type="button" onclick="htmlTest();" value=".html()方法测试"/>
  <input type="button" onclick="htmlTest('this is a trouble!');" value=".html('这是一个赋值')方法测试"/>

</div>
<hr>
<div>
    <input type="button" onclick="htmlTest('this is a trouble!');" value=".html('这是一个赋值')方法测试"/><br>
    <script>
    </script>
    <a href='#' id='link_a' class='link_a'> 第一个</a><br>
    <a href='#' id='link_a' class='link_a'> 第二个</a><br>
    <a href='#' id='link_a' class='link_a'> 第三个</a><br>
    <a href='#' id='setAttr' > 三个都隐藏</a><br>
    <a href='javascript:void(0)' id='getInnerElement'>选取子元素</a>
    <script>
    $('.link_a').bind('click', function(){
        alert($(this).val());
    });
    $('#setAttr').bind('click', function(){
        var d = $('.oo');
        d.hide();
    });
    $('#getInnerElement').click(function(){
        $(".ctx").find("p").parent().hide();
    });
    </script>
    
    <p> 多余</p>
</div>
<div>
  <p id='oo' class='oo'>First Paragraph</p>
  <p id='oo' class='oo'>Second Paragraph</p>
  <p id='oo' class='oo'>Yet one more Paragraph</p>
  <script type="text/javascript">
    $("p").click(function () { 
      $(this).slideUp(); 
    });
</script>
</div>
<div id="per">
   <p>
    Zuckerberg 似乎对深色的连帽衫极为钟情，<a style="text-decoration:none;" class="a_content" href="http://s.weibo.com/weibo/%25E6%2588%2596%25E8%25AE%25B8?topnav=1&wvr=4&topsug=1">或许</a>>以至于在为 IPO 进行路演的重要日子里，他依然我行我素。然而这引起一众投资者的不满“我认为这是一种不成熟的迹象。”目前，Mark 拥有 56.9% 的投票权，不管公司是否 IPO，他将牢牢控制着公司，这也许就是他想传达给投资者的信
   </p>
</div>
<div class='ctx oom'>
  <div id='one' class='one'>
    <p > this is one</p>
    <div id='two' class='two'>
      <p> this is two</p>
      <div id='three' class='three'>
        <p> this is three</p>
      </div>   
    </div>
  </div>
</div>
</html>